<template>
  <!-- 内容主体区域 -->
  <div class="content">
    <!-- 左侧榜单区域 -->
    <div class="left-side">
      <div class="tab">
        <div
            class="tab-item"
            :class="{ active: activeTab === 'vip' }"
            @mouseenter="setTab('vip')"
        >vip金榜</div>
        <div
            class="tab-item"
            :class="{ active: activeTab === 'completed' }"
            @mouseenter="setTab('completed')"
        >完结金榜</div>
        <div
            class="tab-item"
            :class="{ active: activeTab === 'thousand' }"
            @mouseenter="setTab('thousand')"
        >千字金榜</div>
      </div>

      <ul class="rank-list">
        <li
            v-for="(item, index) in rankData[activeTab]"
            :key="item.id"
            class="rank-item"
            @click="goRankDetail(item)"
        >
          <!-- 用索引 + 1 显示排名序号，从 1 开始 -->
          <span class="rank-tag">{{ index + 1 }}</span>
          <div class="rank-title">
            {{ item.title }}
          </div>
          <span class="author">{{ item.author }}</span>
        </li>
      </ul>

      <div class="rank-footer">
        <div class="rank-label">
          {{ footerLabel[activeTab] }}
        </div>
      </div>
    </div>

    <!-- 中间内容区域 -->
    <div class="middle-side">
      <div class="banner">
        <img src="@/assets/img/banner.png" alt="banner">
      </div>
      <!--        展示图片以及小说名-->
      <div class="imageList">
        <div class="story" v-for="(yq, index) in yqList" :key="index">
          <div class="storyInfo">
            <img :src="require('@/assets/img/'+yq.storyimg)"  alt="小说图片"></img>
          </div>
          <div @click="goDetail(yq)" class="storyName">《{{yq.name}}》</div>
        </div>
      </div>

      <div class="notice">
        <h3 class="notice-title">最新公告</h3>
        <ul class="notice-list">
          <li class="notice-item">霸王票抽奖和儿童站征文已开启，点击查收端午赠礼！</li>
          <li class="notice-item">五一快乐亿点点！动态装扮+超多好礼兑不停~ [04-29]</li>
          <li class="notice-item">小书喵五周年庆典有奖征集进行中，点击参与五一活动！</li>
        </ul>
      </div>
    </div>

    <!-- 右侧推荐区域 -->
    <div class="right-side">
      <div class="recommend-box">
        <h3 class="recommend-title">vip强力推荐</h3>
        <ul class="recommend-list">
          <li
              v-for="(item, index) in recommendList"
              :key="index"
              class="recommend-item"
          >
            <div class="recommend-text">
              {{ item.title }}
            </div>
            <span class="recommend-author">{{ item.author }}</span>
          </li>
          <div class="report-item">
            <img src="@/assets/img/jb.png">
            <span class="report-word">电话：110</span>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";  // 合并导入语句
import { router } from "@/router/router.ts";
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import {require} from "@/utils/getFileUrl"

//创建钩子获取数据
let yqList = ref()

//获取数据的页面
onMounted(()=> {
  request.get("/getChunai")
      .then(response => {
        yqList.value = response.data
      })
      .catch(error => {
        ElMessage.error(error)
      })
})

//使用小说对象作为参数并打开新窗口跳转详情页（导航栏上只显示小说id和名字）
function goDetail(story) {
  window.open(router.resolve({path: '/details',query:{"story":JSON.stringify(story)}}).href)
}


// 标签切换相关
const activeTab = ref('vip');
function setTab(tab: string) {
  activeTab.value = tab;
}

// 底部标签文本
const footerLabel = {
  vip: 'vip文月销量排行榜',
  completed: '完结文30日销量排行榜',
  thousand: '千字文月销量排行榜'
};

// 排行榜数据（带唯一ID）
const rankData = {
  vip: [
    { id: 1, title: "病弱少爷又在被迫探案", author: "废水汐" },
    { id: 2, title: "原来我不是精神病啊", author: "深海手术刀" },
    { id: 3, title: "京圈少爷的公用狗腿", author: "野猫霸霸" },
    { id: 4, title: "我骑扫帚去修仙", author: "拉棉花糖的" },
    { id: 5, title: "诡异世界打工实录", author: "妄鸦" },
    { id: 6, title: "泛泛", author: "巫哲" },
    { id: 7, title: "苗疆少主（全息）", author: "蝶之灵" },
    { id: 8, title: "在全A男团中假装Alpha", author: "星期十" },
    { id: 9, title: "非典型团宠", author: "风入松韵" }
  ],
  completed: [
    { id: 10, title: "绿茶狍子被狼族首富强撩了", author: "宿星川" },
    { id: 11, title: "狼子野心真少爷只想躺平", author: "四溢" },
    { id: 12, title: "这很奇怪", author: "月下蝶影" },
    { id: 13, title: "伪装学渣", author: "木瓜黄" },
    { id: 14, title: "撒野", author: "巫哲" },
    { id: 15, title: "某某", author: "木苏里" },
    { id: 16, title: "全球高考", author: "木苏里" },
    { id: 17, title: "awm[绝地求生]", author: "漫漫何其多" },
    { id: 18, title: "默读", author: "Priest" }
  ],
  thousand: [
    { id: 20, title: "卿城似雪", author: "倾碧悠然" },
    { id: 21, title: "校园里的暗恋日志", author: "朝唧唧" },
    { id: 22, title: "他的小情书", author: "叫我苏三少" },
    { id: 23, title: "雪落有声", author: "布丁琉璃" },
    { id: 24, title: "皇太孙的白月光", author: "繁王轻霜" },
    { id: 25, title: "愿服输", author: "习又" },
    { id: 26, title: "引爱入局[京圈]", author: "姜温夏" },
    { id: 27, title: "潮湿的你", author: "宋昭" },
    { id: 28, title: "小巷里的故事", author: "白茄" }
  ]
};

// 右侧推荐列表数据（带唯一ID）
const recommendList = [
  { id: 30, title: "服输", author: "习又" },
  { id: 31, title: "引妻要[京圈]", author: "姜温夏" },
  { id: 32, title: "跟你们说纯爱", author: "叫我苏三少" },
  { id: 33, title: "潮湿天气的爱恋", author: "宋昭" },
  { id: 34, title: "小巷里的纯爱[六]", author: "白茄" },
  { id: 35, title: "春夜纯爱", author: "弥萝" },
  { id: 36, title: "太上皇的纯爱故事", author: "繁王轻霜" },
  { id: 37, title: "养大的反派是我爱人", author: "云奺" },
  { id: 38, title: "雪香纯爱", author: "布丁琉璃" },
  { id: 39, title: "卿娘的纯爱路", author: "倾碧悠然" },
  { id: 40, title: "稻荷崎的纯爱经理", author: "朝唧唧" }
];


// 登录相关函数
function handleLogin() {
  console.log('触发登录操作');
}

// 注册相关函数
function handleRegister() {
  console.log('触发注册操作');
}

// 找回账号函数
function handleFindAccount() {
  console.log('触发找回账号操作');
}

// 找回密码函数
function handleFindPassword() {
  console.log('触发找回密码操作');
}

// 导航函数
function navigateTo(path: string) {
  console.log('导航到路径：', path);
}
function goTonovelList() {
  router.push({path: '/novelList'})
}
</script>

<style scoped>
@import '@/assets/css/yq.css';
</style>